{% extends 'ShopAdminBundle::base.html.twig'%}
{% set _module,_current='设置','添加区域' %}

{% block main_content %}
    <div class="box box-info col-md-8 form_wrap">
        <form class="form-horizontal">
            <div class="box-body">
                <div class="row">搜索区域</div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">城市</label>
                    <div class="col-sm-2">
                        <select id='city_list' class="form-control search-select"
                                name="city" data-rel="tooltip">
                        </select>
                    </div>

                    <label class="col-sm-1 control-label">地区</label>
                    <div class="col-sm-2">
                        <select id='district_list' class="form-control search-select"
                                name="district" data-rel="tooltip">
                        </select>
                    </div>

                    <label class="col-sm-1 control-label">商圈</label>
                    <div class="col-sm-3">
                        <select id='zone_list' class="form-control search-select"
                                name="shopZone" data-rel="tooltip">
                        </select>
                    </div>
                </div>

                </div>
        </form>

        <div class="delimiter"></div>

        <form class="form-horizontal" >
            <div class="box-body">
                <div class="row" style="margin-bottom:20px;">添加区域</div>

                <div class="form-group">
                    <label class="col-sm-1 control-label">城市</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="city" required="required" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">区域</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="city" required="required" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">商圈</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="city" required="required" value="">
                    </div>
                </div>
            </div>
            <div class="row box-foot" style="margin-left:10%;margin-bottom:20px;">
                <button type="button" class="btn btn-success"
                        id="btn_submit_form">确认</button>
            </div>

        </form>

    </div>

{% endblock %}

{% block plugin_js %}
<script>

    var city_wrap=$('#city_list'),
        district_wrap=$('#district_list'),
        zone_wrap=$('#zone_list');

    wxi.map([city_wrap, district_wrap, zone_wrap], function(item){
        wxi.shopBundle.fillSelect(item,[]);
    });

    //获取城市列表，填充城市下拉框
    var city_data={};
    wxi.shopBundle.getCityList(function(){
        city_data=wxi.util.getCache('cityData');
        wxi.shopBundle.fillSelect(city_wrap,city_data);

        //改变城市，动态修改对应的地区
        city_wrap.on('change',function(){
            var cur_city=$(this).val();
            var district=city_data[cur_city] || [];

            wxi.shopBundle.fillSelect(district_wrap, district);
            district_wrap.val(0).trigger('change');
        });

        district_wrap.on('change',function(){
            var cur_city=city_wrap.val(),
                    cur_dist=$(this).val();

            var zone= city_data[cur_city] && city_data[cur_city][cur_dist] ?
                    city_data[cur_city][cur_dist] : [];

            wxi.shopBundle.fillSelect(zone_wrap, zone);
            zone_wrap.val(0).trigger('change');
        });

    });


</script>

{% endblock %}

